<template>
  <div>
    <!-- 顶部搜索 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      background="#2eb979"
    >
    <template #label >
      上海<van-icon name="location" size='.3rem' @click='search'/>
    </template>
    <template #left-icon>
      <van-icon name="search" size=".4rem" color=''/>
    </template>
    <template #left>
    <van-icon name="arrow-left"  @click="$router.go(-1)"/>
    </template>
  <template #action>
    <div @click="onSearch"><van-icon name="location-o" size=".6rem" /></div>
  </template>
</van-search>
   <!-- 下拉列表 -->
   <van-dropdown-menu active-color="#2eb979">
    <van-dropdown-item title='区域'  >
      <van-picker show-toolbar
       toolbar-position='bottom'
       :columns="columns"
       value-key="label"
       confirm-button-text
       @confirm='confirm'
       @cancel='showPicker=false'
         />
    </van-dropdown-item>
  <van-dropdown-item title='方式' >
     <van-picker
      show-toolbar
      toolbar-position='bottom'
      :columns="modes"
      :default-index="0"

       />
  </van-dropdown-item>
    <van-dropdown-item  title='租金'  >
      <van-picker
       show-toolbar
       toolbar-position='bottom'
       :columns="moneys"
    />
    </van-dropdown-item>
  <van-dropdown-item  title='筛选'  >

  </van-dropdown-item>

</van-dropdown-menu>

<List :cityId='cityId' :stat='stat' :end='end'></List>
  </div>
</template>

<script>
import List from './List.vue'
import { LoacalAPI } from '@/api'
export default {
  components: {
    List
  },
  data () {
    return {
      cityId: 'AREA|88cff55c-aaa4-e2e0',
      stat: 1,
      end: 20,
      showPicker: false,
      value: '',
      list: [],
      areaList: [],
      children: [],
      subList: [],
      columns: [],
      modes: ['不限', '整租', '合租'],
      loading: false,
      moneys: [
        '不限',
        '1000及以下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-7000',
        '7000以上'
      ]

    }
  },
  async created () {
    const res = await LoacalAPI({ value: this.cityId })
    this.areaList = res.data.body.area
    this.subList = res.data.body.subway
    console.log(res)
    // 因为第一个没有孩子，就让他的孩子为空
    this.areaList.children.forEach(item => {
      if (!item.children) {
        item.children = ['']
      }
    })
    this.subList.children.forEach(item => {
      if (!item.children) {
        item.children = ['']
      }
    })
    this.columns.push(this.areaList)
    this.columns.push(this.subList)
  },
  methods: {
    onSearch () {

    },
    search () {
      this.$router.replace('/city')
    },
    confirm () {
      this.showPicker = false
    }

  }
}
</script>

<style lang="less" scoped>

/deep/ .van-picker__cancel{
font-size: 18px;
color:#2eb979;
font-weight: 500;

width: 35%;
border-top: 1px solid #ccc;
}
/deep/ .van-picker__confirm{
  background-color: #2eb979;
  color:#fff;
  width: 65%;

border-top: 1px solid #ccc;
font-size: 18px;
}
.van-search__content{
margin-left: 10px;
    z-index: 2;
color:#f7f8fa;
  }
.van-icon-search{
  padding-left: 20px;
  padding-top:1px ;
}
  .van-icon-arrow-left{
        color: #fff;
  }
  .van-icon-location-o{
     color: #fff;
     padding-top:6px;
  }
</style>
